// components/listBox/listBox.js
Component({
  externalClasses: ['custom-class'],

  /**
   * 组件的属性列表
   */
  properties: {
    // 距底部/右边多远时，触发 scrolltolower 事件
    bottomDis: {
      type: String,
      value: '200',
      observer(newVal, oldVal) {
        let val = Number(newVal)
        if(val) {
          this.setData({
            lower: val,
          })
        }
      },
    },
    page: {
      type: Number,
      value: 0,
      observer(newVal, oldVal) {
        this.setData({
          bottom: false,
        })
      },
    },
    total: {
      type: Number,
      value: -1,
      observer(newVal, oldVal) {
        if(oldVal === -1) this.isInit = true
      },
    },
    limit: {
      type: Number,
      value: 0,
      observer(newVal, oldVal) {},
    },
    reset: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        if(this.resetInit) {
          this.setData({
            scrollTop: 0,
            isAll: false,
            bottom: false,
            isBlank: false,
            isBlankDelay: false,

            slotHide: true,
          })
        }
      },
    },
    // 是否开启下拉刷新
    refreshEnable: {
      type: Boolean,
      value: true,
    },
  },

  // 监听
  observers: {
    reset(val) {
      if(!this.resetInit) this.resetInit = true
    },
    total(val) {
      if(this.isInit) {
        this.setData({
          isBlank: val > 0 ? false : true,
        })
      }
    },
    'page, limit, total'(page, limit, total) {
      if(this.data.refreshEnable) {
        if(this.data.refreshing) wx.$toast('刷新成功！')
        // 停止下拉刷新
        this.setData({
          refreshing: false,
        })
      }

      if(this.isInit) {
        let { slotHide, } = this.data,
            obj = {
              slotHide: false,
            }
        if(total > 0 && page * limit >= total) obj.isAll = true
        // this.setData(obj)
        let timer = setTimeout(() => {
          this.setData(obj)
          // if(slotHide && total > 0) this.toBottom()
          if(slotHide && total > 0) this.getSlotHeight()
          clearTimeout(timer)
        }, 500)
        // if(!this.data.ready) return

        if(!slotHide) this.getSlotHeight()
      }

    },
    isBlank(val) {
      let timer = setTimeout(() => {
        let obj = {
          isBlankDelay: val,
        }
        if(val) obj.slotHide = true
        this.setData(obj)
        clearTimeout(timer)
      }, val ? 500 : 0)
    },
    'scrollHeight, slotHeight'(scrollH, slotH) {
      let { isAll, isBlank, total, } = this.data
      if(!isAll && !isBlank && scrollH && slotH && scrollH >= slotH) {
        this.toBottom()
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    scrollTop: 0,
    // 距底部/右边多远时，触发 scrolltolower 事件
    lower: 20,
    bottom: false,

    isAll: false,
    isBlank: false,
    isBlankDelay: false,

    slotHide: false,

    scrollHeight: 0,
    slotHeight: 0,

    // 下拉刷新
    refreshing: false,

  },

  // 生命周期
  lifetimes: {
    created() {},
    attached() {},
    ready() {
      // let scrollPro = this.getDomHeight('.scroll'),
      //     slotPro = this.getDomHeight('.slot')
      // Promise.all([scrollPro, slotPro]).then(heights => {
      //   this.setData({
      //     scrollHeight: heights[0],
      //     slotHeight: heights[1],
      //   })
      // })
      this.getDomHeight('.scroll').then(height => {
        this.setData({
          scrollHeight: height,
        })
      })
    },
    moved() {},
    detached() {},
    error() {},
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toBottom(e) {
      let { bottom, page, total, limit, } = this.data,
          obj = {
            bottom: true,
          }
      if(bottom) return
      if(page <= 0 && limit <= 0 && total < 0) return
      if(page && limit) {
        if(page < Math.ceil(total / limit)) {
          this.triggerEvent('tobottom')
          this.setData(obj)
        }
      }
    },
    onRefresh(e) {
      if(this.data.refreshEnable) {
        this.data.refreshing = true
        this.triggerEvent('refresh')
      }
    },
    //221126 yan 增加binddragend滚动结束事件
    onDragEnd(e){
      this.triggerEvent('dragend',e)
    },

    // 获取列表插槽实际高度
    getSlotHeight() {
      this.getDomHeight('.slot').then(height => {
        this.setData({
          slotHeight: height,
        })
      })
    },
    // 获取元素高度
    getDomHeight(cls) {
      return new Promise((resolve, reject) => {
        let query = this.createSelectorQuery()
        query.select(cls).boundingClientRect(rect => {
          let height = rect.height
          resolve(height)
        }).exec()
      })
    },
  },
})
